<template>
<div @click="queryData()" class="container">
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block v-for="(item, idx) in imgUrls" :key="idx">
          <swiper-item>
              <image :src="item.url" class="z-width-100-percent" mode="widthFix"/>
          </swiper-item>
      </block>
  </swiper>
<!--@click="gotoTaobao"doCopy('ssfee')

 -->
  <dev v-for="(idx, key) in goodsArray":key="key">
    <van-card 
      :num="idx.vol"
      :price="idx.price"
      :desc="idx.desc"
      :title="idx.title"
      :thumb="idx.img"
      @click="gotoTaobao(idx)"
    >
    </van-card>
  </dev>

    <van-overlay :show="taobaoPopupShow" @click="onTaobaoPopupClose">
      <div class = wrapper>
        <van-image width="25rem" height="25rem" fit=contain src="cloud://hsxsq-cloud-fc9gz.6873-hsxsq-cloud-fc9gz-1302198989/pdd/409888892.jpg" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Dialog from '../../../static/vant/dialog/dialog';
export default {
    created () {
      wx.cloud.init();
      //this.queryData();
      },
    mounted () {
      this.querySwiper();
      this.queryData();
    },
    data () {
      return {
        taobaoPopupShow: false,
        imgUrls0: [
          'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
          'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
          'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg'
        ],
        iconMap: {
          'icon-caigou': {title: '美食', bk: '#EF8B3E'}, 
          'icon-shangpin': {title: '猫眼电影', bk: '#E4463B'},
          'icon-touchengkongyun': {title: '酒店住宿', bk: '#8B67E5'},
          'icon-daohang': {title: '休闲娱乐', bk: '#5DC7B0'},
          'icon-zitigui': {title: '外卖', bk: '#F3AE42'},
          'icon-jiesuan': {title: 'KTV', bk: '#5DC1A9'},
          '.icon-jijianfasong': {title: '丽人', bk: '#EC5B6E'},
          'icon-shoucang': {title: '景点门票', bk: '#5CA2F2'},
          'icon-baobiao': {title: '火车票', bk: '#FD9D21'},
          'icon-pifuzhuti': {title: '民宿', bk: '#BED300'}
        },
        imgUrls: [],
        goodsArray: [],
        goodsArray0: [
          {title: '桥头火锅底料', 
           desc: '重庆飞机场每家都在卖的火锅底料',
           vol: '24',
           img: 'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
           shareImg: 'cloud://hsxsq-cloud-fc9gz.6873-hsxsq-cloud-fc9gz-1302198989/pdd/pdd1.jpg',
           price: 28},
          {title: '丽尔泰冬阴功酱', 
           desc: '盒马供货商',
           vol: '120',
           img: 'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
           shareImg: 'cloud://hsxsq-cloud-fc9gz.6873-hsxsq-cloud-fc9gz-1302198989/pdd/pdd1.jpg',
           price: 18}
        ],
      }
    },
    methods: {
      gotoTaobaoWeb: function (gd) {
        wx.navigateTo({url: "/pages/thrdpart/main?page_point=" + gd.url})
      },

      gotoTaobaoImg: function (gd) {
        /*
        console.log("==" + text + "==")
                        wx.setClipboardData({
                          data: text,
                          success: function (res) {
                            wx.getClipboardData({
                              success: function (res) {
                                //wx.showToast({
                                //  title: '复制成功'
                                //})
                              }
                            })
                          }
                        });*/
      //this.taobaoPopupShow = true
      // show pic
  　　let _this = this
  　　//图片预览
      wx.previewImage({
        current:gd.shareImg,  // 当前显示图片的http链接
        urls: [gd.shareImg]// 需要预览的图片http链接列表
      })
      },

      gotoTaobao: function (gd) {
        if (gd.type == "web") {
          this.gotoTaobaoWeb(gd);
        } else {
          this.gotoTaobaoImg(gd);
        }
      },

      onTaobaoPopupClose: function() {
        this.taobaoPopupShow = false
      },

      doCopy: function (val) {
        this.dataProcessing(val)
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      },
      queryData: function() {
            const db = wx.cloud.database({});
            const cont = db.collection('hsxsq');
            var this_ = this;
            db.collection('hsxsq').get({
              success: function(res) {
                // res.data 是包含以上定义的两条记录的数组
                console.log("list data");
                console.log(res.data);
                this_.goodsArray = res.data;
              }
            });
          },
      querySwiper: function() {
            const db1 = wx.cloud.database({});
            var this_ = this;
            db1.collection('hsxsqswi').get({
              success: function(res) {
                // res.data 是包含以上定义的两条记录的数组
                console.log("swiper data");
                console.log(res);
                this_.imgUrls = res.data;
              }
            });
          }
    }
}
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
